<template>
    <div class="app-container">
        <div v-if="detail" style="background-color: #fff;padding: 20px">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple">
                        <el-image
                        style="width: 100px; height: 133px"
                        :src="detail.BookPic"
                        fit="fit">
                        </el-image>
                    </div><br/>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">书籍id：{{ detail.book_id }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">书籍名称：{{ detail.name }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">作者：{{ detail.author }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">简介：{{ detail.intro }}</div></el-col>
            </el-row>

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">分类：{{ detail.category }}</div></el-col>
            </el-row>

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">第一章id：{{ detail.first_section }}</div></el-col>
            </el-row>

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">字数：{{ detail.WordNum }}</div></el-col>
            </el-row>

            
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">章节数量：{{ detail.chaptercount }}</div></el-col>
            </el-row>
            
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">点击数量：{{ detail.clicks }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple">评分：{{ detail.score }}</div></el-col>
            </el-row>
            
        </div>
      <div class="filter-container" style="margin-top: 10px">

        <!-- <el-input type="input" v-model="listQuery.name" placeholder="章节名称搜索" style="width: 220px;"
        class="filter-item"/>
       
        <a-button type="primary" size="large" @click="handleFilter">
          搜索
        </a-button>
        <a-button type="default" size="large" @click="handleCancel">
          重置
        </a-button> -->
        <!-- <br/> -->
        <el-button
        plain size="small"
            v-waves
            class="filter-item btn"
            type="success"
            @click="showAdd()"
        >添加章节</el-button>
      </div>
  
      <el-table
        v-loading="listLoading"
        :data="list"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          key="1"
          label="章节id"
          align="center"
          prop="chapterid"
          min-width="50"
        >
        </el-table-column>
        <el-table-column
          key="2"
          label="章节名称"
          align="center"
          prop="name"
          min-width="50"
        >
        </el-table-column>

        <el-table-column
          key="4"
          label="操作"
          align="center"
          prop="123"
          min-width="50"
        >
        <template slot-scope="{row}">
            <el-link type="primary" @click="showEdit(row)">编辑</el-link>
        </template>
        
        </el-table-column>

      </el-table>
      <pagination
      v-show="total > 0"
      :total="total"
      class="pageShow"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <div>
        <el-dialog
            :title="temp.is_edit? '编辑章节':'添加章节'"
            :visible.sync="bookFormShow"
            width="50%"
            :before-close="handleClose">
            <div>
                <el-form :model="temp" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="章节名称" prop="name">
                        <el-input v-model="temp.name"></el-input>
                    </el-form-item>
                    <el-form-item label="章节内容" prop="content">
                        <el-input type="textarea" v-model="temp.content"></el-input>
                    </el-form-item>
                    <el-form-item label="是否第一章" prop="resource">
                        <el-radio-group v-model="temp.is_first">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="bookFormShow = false">取 消</el-button>
                <el-button type="primary" @click="temp.is_edit ? editSection(): addSection()">提 交</el-button>
            </span>
            </el-dialog>

    </div>
    </div>
  </template>
  
  <script>
  import {
    Bookchapters,
    addBookchapters,
    editBookchapters,
    getBookchapters
  } from "@/api/admin/book";
  import waves from "@/directive/waves"; // waves directive
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import { MessageBox, Message } from "element-ui";
  export default {
    title: '书籍详情',
    name: "bookDetail",
    components: { Pagination },
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        list: null,
        total: 1,
        listLoading: false,
        value1: "",
        listQuery: {
          page: 1,
          page_size: 20,
          book_id: '',
          name: "",
        },
        pickerOptions2: {
          shortcuts: [
            {
              text: "昨天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        detail: '',
        temp:{
            is_edit:false,
            book_id: '',
            chapterid: '',
            name: '',
            content: '',
            is_first: ''
        },
        bookFormShow: false,
        rules: {
          name: [
            { required: true, message: '请输入章节名称', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入章节内容', trigger: 'blur' }
          ]
        }
      };
    },
    created() {
    },
    mounted() {
        this.listQuery.query_type = 1;
        this.detail = this.$route.query;
        this.listQuery.book_id = this.detail.book_id
        this.total = parseInt(this.detail.chaptercount)
        if (this.listQuery.book_id){
            this.getList()
        }
    },
    methods: {

      getList() {
        this.listLoading = true;
        Bookchapters(this.listQuery).then(res => {
          this.listLoading = false;

          if (res.code == 200){
            this.list = res.data
          }else{
            Message({
                message: res.message,
                type: "error",
                duration: 2000,
              });
          }
        })
            
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleCancel() {
        this.value1 = "";
        this.listQuery.page = 1;
        this.listQuery.bookid = 1;
        this.listQuery.name = ''
        this.getList();
      },
      handleClose(){
        this.bookFormShow = false
      },
      showAdd(){
        this.temp = {
            is_edit:false,
            book_id: this.detail.book_id,
            chapterid: '',
            name: '',
            content: '',
            is_first: ''
        }
        this.bookFormShow = true
      },
      addSection(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            addBookchapters(this.temp).then(res => {
                if (res.code == 200){
                    this.bookFormShow = false
                    Message({
                        message: res.message,
                        type: "success",
                        duration: 2000,
                    })
                    this.getList()
                }else{
                    Message({
                        message: res.message,
                        type: "error",
                        duration: 2000,
                    })
                }
            })
          } else {
          }
        });
      },
      showEdit(row){
        getBookchapters({bookid:this.detail.book_id, chapterid: row.chapterid }).then(res => {
            if (res.code == 200){
                this.temp = {
                    is_edit:true,
                    book_id: this.detail.book_id,
                    chapterid: row.chapterid,
                    name: row.name,
                    content: res.data.content,
                    is_first: row.is_first
                }
                this.bookFormShow = true
            }else{
                Message({
                    message: res.message,
                    type: 'error',
                    duration: 2000
                })
            }
        })
        
      },
      editSection(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            editBookchapters(this.temp).then(res => {
                if (res.code == 200){
                    this.bookFormShow = false
                    Message({
                        message: res.message,
                        type: "success",
                        duration: 2000,
                    })
                    this.getList()
                }else{
                    Message({
                        message: res.message,
                        type: "error",
                        duration: 2000,
                    })
                }
            })
          } else {
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 95%;
  }
  .pageHidden {
    display: none;
  }
  @media (max-width: 550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .pickertime {
      width: 100%;
    }
  }
  .filter-item {
    margin-bottom: 3px;
  }

  .el-col {
    border-radius: 4px;
  }
  /* .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  } */
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  </style>
  